<template>
  <view class="reply">
    <cu-custom bgColor="bg-gradual-blue" :isBack="true">
      <block slot="backText">返回</block>
      <block slot="content">回复</block>
    </cu-custom>
    <view class="cu-card dynamic">
      <view class="cu-list menu menu-avatar">
        <view class="cu-item">
          <view class="cu-avatar round lg" v-if="comments.userData" :style="'background-image:url('+comments.userData[0].user_cover+');'"></view>
          <view class='content flex-sub'>
            <view class='text-gray text-sm flex justify-between'>
              <text class="cuIcon-people">{{comments.userData[0].user_name}}</text>
              <text class="cuIcon-time">{{comments.comment_time}}</text>
              <text :class="comments.liked?'cuIcon-appreciatefill text-red':'cuIcon-appreciate text-gray'">
                {{comments.total}}</text>
            </view>
          </view>
        </view>
        <view class='padding bg-reply'><span class='reply_label'>评论：</span>{{comments.comment_body}}</view>
        <view class='action padding'>
          <text class='cuIcon-titles text-orange'></text>
          <view class="cu-capsule radius">
            <view class='cu-tag bg-mauve'>回复</view>
            <view class='cu-tag line-red'>{{replyList.length}}</view>
          </view>
        </view>

        <view class="cu-list menu menu-avatar comment solids-top">
          <block v-if="replyList.length>0">
            <view class="cu-item bg-reply" v-for="(item,index) in replyList" :key="index">
              <view class="cu-avatar round" :style="'background-image:url('+item.user[0].user_cover+');'"></view>
              <view class='content'>
                <view class="text-blod reply_label">{{item.user[0].user_name}}</view>
                <view class='text-black text-df'>
                  {{item.reply_body}}
                </view>
                <view class='margin-top-sm flex justify-between'>
                  <view class='cuIcon-time text-gray text-df'>{{item.reply_time}}</view>
                  <view>
                  </view>
                </view>
              </view>
            </view>
          </block>
          <view class="noData" v-else>
            <image :src="imgUrl+'static/noNews.jpg'"  class="noImg" mode="aspectFit"></image>
            <text class="noTitle">暂无回复</text>
          </view>
        </view>

      </view>
    </view>
		<view v-if="replyList.length>0" class='cu-load bg-mauve over'></view>
      <view class="cu-bar foot input" :style="'bottom:'+InputBottom+'px'">
        <input class="solid-bottom"v-model="input" maxlength="80" cursor-spacing="10"></input>
        <button class='cu-btn round bg-mauve shadow' @click='reply'>回复</button>
      </view>
  </view>
</template>

<script>
  import util from '../../utils/util.js';
  export default {
    data() {
      return {
        imgUrl:getApp().globalData.imgUrl,
				InputBottom:0,
        comment_id: '',
				input: '',
        comments: {},
        replyList: {}
      }
    },
    onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
      let directList = JSON.parse(option.direct);
      // directList.comment_time=util(parseInt(directList.comment_time));
      this.comment_id = directList._id;
      this.comments = directList;
      this.getReply();
      this.getVisit();
    },
    methods: {

      getReply() {
        let _this = this;
        wx.cloud.callFunction({
          name: 'getReply',
          data: {
            id: _this.comment_id
          },
          success: res => {
            let list = res.result.list;
            list.map(item => {
              item.reply_time = util(parseInt(item.reply_time));
            })
            this.replyList = list;
          },
          fail: err => {
            console.error('[云函数] [getReply] 调用失败', err)
          }
        })
      },

      reply() {
        uni.vibrateShort({})
        if (this.input) {
          let userInfo =getApp().globalData.userInfo;
          if (Object.keys(userInfo).length>0) {
            wx.cloud.callFunction({
              name: 'addReply',
              data: {
                id: this.comment_id,
                user_id: userInfo.user_id,
                reply: this.input
              },
              success: res => {
                if(res.result.errMsg=='collection.add:ok'){
									this.input = '';
									this.getReply();
									uni.showToast({
										title: '回复成功',
										duration: 1500
									})
                }
              },
              fail: err => {
                console.error('[云函数] [addReply] 调用失败', err)
              }
            })
          } else {
            uni.navigateTo({
              url: '../login/login',
            })
          }
        } else {
          wx.showToast({
            title: '输入不能为空',
            icon: 'none'
          })
        }
      },
      getVisit() {
        let userInfo =getApp().globalData.userInfo;
        if (Object.keys(userInfo).length>0) {
          wx.cloud.callFunction({
            name: 'getVisit',
            data: {
              id: this.comment_id,
              user_id: userInfo.user_id
            },
            success: res => {
              // console.log(res)
            },
            fail: err => {
              console.error('[云函数] [addReply] 调用失败', err)
            }
          })
        }
      }
    }
  }
</script>

<style>
	.dynamic{
		
	}
	.bg-reply{
		background: #fff;
		border-bottom: 1rpx dotted #bbb;

	}
	.reply_label{
		color: #01aaed;
	}
</style>
